<template>
	<view class="charts-box">
		<qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					padding: [0, 15, 0, 10],
					enableScroll: true,
					legend: {
						show: true,
						position: "top",
						lineHeight: 25
					},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 10,
						rotateLabel: true,
						fontSize: 10,
						marginTop: 5
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				}
			};
		},
		created() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: [
							"10/1", "10/2", "10/3", "10/4", "10/5", "10/6", "10/7",
							"10/8", "10/9", "10/10", "10/11", "10/12", "10/13", "10/14",
							"10/15", "10/16", "10/17", "10/18", "10/19", "10/20", "10/21",
							"10/22", "10/23", "10/24", "10/25", "10/26", "10/27", "10/28",
							"10/29", "10/30", "10/31"
						],
						series: [{
								name: "群聊总数",
								data: [0, 1, 1, 0, 10, 0, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 4]
							}, {
								name: "群内客户数",
								data: [0, 2, 1, 1, 5, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
							},
							{
								name: "入群人数",
								data: [0, 4, 4, 1, 0, 6, 0, 2, 4, 6, 7, 7, 7, 7, 7, 8, 8, 9, 11]
							}, {
								name: "退群人数",
								data: [0, 1, 1, 0, 3, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0]
							},
							{
							  name: "活跃人数",
							  data: [0, 1, 0, 7, 0, 10, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0]
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	};
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>